import React, { Component } from "react";
import { Card, Progress, Table, Icon } from "antd";
import LinkButton from "../../../components/link-button";
import "./icsdetail.less";
import * as echarts from "echarts";
class Sitetoscandetaile extends Component {
  constructor(props) {
    super(props);
    this.state = { key: "tab1", noTitleKey: "app" };
  }
  onTabChange = (key, type) => {
    console.log(key, type);
    this.setState({ [type]: key });
  };
  options = () => {
    var chartDom = document.getElementsByClassName("main")[0];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: "主机风险等级分布",
        textStyle: {
          textAlign: "center",
          fill: "#333",
          fontSize: 14,
          fontWeight: 500,
        },
      },
      xAxis: {
        type: "category",
        data: ["紧急", "高危", "中危", "低危", "信息"],
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: "value",
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          data: [4, 5, 0, 0, 0],
          type: "bar",
        },
      ],
    };

    option && myChart.setOption(option);
  };
  options1 = () => {
    var chartDom = document.getElementsByClassName("main")[1];
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      title: {
        text: "漏洞等级分布",
        textStyle: {
          textAlign: "center",
          fill: "#333",
          fontSize: 14,
          fontWeight: 500,
        },
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        show: true,
        right: 0,
        bottom: 20,
        textStyle: {
          fontSize: 7,
          fontWeight: 100,
        },
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
          data: [
            { value: 300, name: "紧急" },
            { value: 735, name: "高危" },
            { value: 580, name: "中危" },
            { value: 484, name: "低危" },
            { value: 700, name: "信息" },
          ],
          label: {
            show: false,
          },
        },
      ],
    };

    option && myChart.setOption(option);
  };
  componentDidMount() {
    this.options();
    this.options1();
  }
  expandedRowRender = () => {
    const columns = [
      { title: "端口", dataIndex: "port", key: "port" },
      { title: "协议", dataIndex: "deal", key: "deal" },
      {
        title: "服务名称",
        key: "service",
        dataIndex: "service",
      },
      {
        title: "状态",
        dataIndex: "state",
        key: "state",
      },
      {
        title: "软件/版本",
        dataIndex: "operation",
        key: "operation",
      },
      {
        title: "相关漏洞",
        dataIndex: "hole",
        key: "hole",
      },
    ];

    const data = [
      {
        key: 1,
        port: "1883",
        deal: "tcp",
        service: "mqtt",
        state: "open",
        operation: "-/-",
        hole: "0",
      },
      {
        key: 2,
        port: "22",
        deal: "tcp",
        service: "ssh",
        state: "open",
        operation: "OpenSSH/7.4",
        hole: "0",
      },
    ];
    return <Table columns={columns} dataSource={data} />;
  };
  render() {
    const columns2 = [
      { title: "ip地址", dataIndex: "ip", key: "ip" },
      { title: "设备类型", dataIndex: "type", key: "type" },
      { title: "操作系统", dataIndex: "OS", key: "OS" },
      { title: "开放端口", dataIndex: "port", key: "port" },
    ];

    const data2 = [
      {
        key: 1,
        ip: "192.168.16.3",
        type: "通用主机",
        OS: "ios",
        port: 11,
      },
      {
        key: 2,
        ip: "192.168.16.10",
        type: "通用主机",
        OS: "windows",
        port: 11,
      },
    ];

    const columns = [
      {
        title: "扫描时间",
        dataIndex: "time",
        key: "time",
      },
      {
        title: "已扫描主机",
        dataIndex: "host",
        key: "host",
      },
      {
        title: "已发现漏洞数",
        dataIndex: "find",
        key: "find",
      },
      {
        title: "开放端口数",
        key: "num",
        dataIndex: "num",
      },
      {
        title: "扫描模板",
        key: "stencil",
        dataIndex: "stencil",
      },
    ];

    const data = [
      {
        key: "1",
        time: "3分22秒",
        host: 1,
        find: "4",
        num: 11,
        stencil: "快速扫描",
      },
    ];
    const columns1 = [
      {
        title: "ip地址",
        dataIndex: "ip",
        key: "ip",
      },
      {
        title: "用户名",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "密码",
        dataIndex: "password",
        key: "password",
      },
      {
        title: "开放端口数",
        key: "num",
        dataIndex: "num",
      },
      {
        title: "扫描模板",
        key: "type",
        dataIndex: "type",
      },
    ];

    const data1 = [];
    const columns3 = [
      {
        title: "漏洞等级",
        dataIndex: "grade",
        key: "grade",
        render: (text) => {
          return (
            <span>
              <Icon type="exclamation-circle" style={{ color: "red" }} /> {text}
            </span>
          );
        },
      },
      {
        title: "漏洞名称",
        dataIndex: "name",
        key: "name",
        render: (text) => {
          return <div style={{ width: "400px" }}>{text}</div>;
        },
      },
      {
        title: "影响主机数",
        dataIndex: "host",
        key: "host",
      },
    ];

    const data3 = [
      {
        key: "1",
        grade: "紧急",
        name: "OpenSSH多个漏洞",
        host: "1",
      },
      {
        key: "2",
        grade: "紧急",
        name: "OpenSSH多个漏洞",
        host: "1",
      },
      {
        key: "3",
        grade: "紧急",
        name: "OpenSSH多个漏洞",
        host: "1",
      },
      {
        key: "4",
        grade: "紧急",
        name: "OpenSSH多个漏洞",
        host: "1",
      },
    ];
    const tabList = [
      {
        key: "tab1",
        tab: "状态和信息",
      },
      {
        key: "tab2",
        tab: "主机信息",
      },
      {
        key: "tab3",
        tab: "漏洞信息",
      },
    ];
    const contentList = {
      tab1: (
        <div>
          <div className="lookhost-top">
            <div className="main"></div>
            <div className="main"></div>
            <Card title="112" style={{ width: 300 }}>
              <Progress percent={99} small />
              <div style={{ marginTop: 50, marginBottom: 5 }}>
                开始扫描时间：2021-10-19 08：58：35
              </div>
              <div>结束扫描时间：2021-10-19 09：01：57</div>
            </Card>
          </div>
          <div className="lookhost-center">
            <Table columns={columns} dataSource={data} pagination={false} />
          </div>
          <div className="lookhost-bottom">
            <div className="lookhost-bottom-table">
              <div>脆弱账号</div>
              <Table columns={columns1} dataSource={data1} />
            </div>
            <Card title="最新告警" style={{ width: "45%" }}>
              <ul>
                <li>
                  <span>检查目标主机web服务器信息</span>
                  <span style={{ float: "right" }}>2018-10-19 08：58：35</span>
                </li>
                <li>
                  <span>检查目标主机web服务器信息</span>
                  <span style={{ float: "right" }}>2018-10-19 08：58：35</span>
                </li>
                <li>
                  <span>检查目标主机web服务器信息</span>
                  <span style={{ float: "right" }}>2018-10-19 08：58：35</span>
                </li>
              </ul>
            </Card>
          </div>
        </div>
      ),
      tab2: (
        <div>
          <Table
            className="components-table-demo-nested"
            columns={columns2}
            expandedRowRender={this.expandedRowRender}
            dataSource={data2}
          />
        </div>
      ),
      tab3: <Table columns={columns3} dataSource={data3} />,
    };
    return (
      <Card
        style={{ width: "100%" }}
        title="扫描详情"
        extra={
          <LinkButton onClick={() => this.props.history.push("/task")}>
            返回
          </LinkButton>
        }
        tabList={tabList}
        activeTabKey={this.state.key}
        onTabChange={(key) => {
          this.onTabChange(key, "key");
        }}
      >
        {contentList[this.state.key]}
      </Card>
    );
  }
}

export default Sitetoscandetaile;
